<template>
	<Warpper class="model-index">
		<div class="tools">
			<dubhe-button class="primary" @click="dialogTableVisible = true">
				<i class="el-icon-plus"></i> 添加模型
			</dubhe-button>
			<dubhe-button class="danger">
				<i class="el-icon-delete"></i> 删除选中模型
			</dubhe-button>
		</div>

		<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
			<el-form :model="form">
				<el-form-item
					:label="item.name"
					:key="key"
					v-for="(item,key) in column"
					:label-width="formLabelWidth">
					<el-input v-model="form.name" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>

		<el-table :data="tableData" style="width: 100%;margin-top:10px">
			<el-table-column
				type="selection"
				align="center"
				width="57">
			</el-table-column>
			<el-table-column
				:prop="item.key"
				:label="item.name"
				:key="key"
				sortable
				v-for="(item,key) in column">
			</el-table-column>

			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="primary" v-waves @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" v-waves @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</Warpper>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

interface Test {
	date: string;
	name: string;
	address: string;
}
interface Column {
	key: string;
	name: string;
}

@Component({
	name: 'model-index',
	components: {
	// SubMenu
	}
})








export default class extends Vue {
	private dialogTableVisible: boolean = true
	private column: (Column)[] = [
		{ key: 'name', name: '模型名称' },
		{ key: 'address', name: '模型备注' },
		{ key: 'date', name: '字段数量' },
		{ key: 'name', name: '行长度' },
		{ key: 'address', name: '模型类型' },
		{ key: 'date', name: '关联模型' }
	]

	private form: (any)[] = []
	private tableData: (Test)[] = [
		{
			date: '2016-05-02',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1518 弄'
		},
		{
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1517 弄'
		},
		{
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1519 弄'
		},
		{
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1516 弄'
		},
		{
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1517 弄'
		},
		{
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1519 弄'
		},
		{
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1516 弄'
		},
		{
			date: '2016-05-04',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1517 弄'
		},
		{
			date: '2016-05-01',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1519 弄'
		},
		{
			date: '2016-05-03',
			name: '王小虎',
			address: '上海市普陀区金沙江路 1516 弄'
		}
	];
}
</script>
